<template>
    <div class="header">
        <div class="header__inner">
            <div class="header__logo">
                <img alt src="~@/assets/logo.png" />
            </div>
            <div class="header__title">米游社 · 原神</div>
            <div class="header__navwrap">
                <div class="header__navbar">
                    <mmv-link :class="{'header__navitemactive': $route.name=='Home'}" class="header__navitem" to="/">首页</mmv-link>
                    <template v-for="forum in navitems">
                        <mmv-link :class="{'header__navitemactive': forum.id==$route.params.id}" :key="`forum${forum.id}`" :to="`/home/${forum.id}`" class="header__navitem">{{forum.name}}</mmv-link>
                    </template>
                    <mmv-link class="header__navitem" target="_blank" to="https://bbs.mihoyo.com/ys/obc/?bbs_presentation_style=no_header">观测枢</mmv-link>
                </div>
            </div>
            <div class="header__right">
                <form class="header__search">
                    <input :class="{focused:is_search_focused}" @blur="is_search_focused=false" @focus="is_search_focused=true" type="text" />
                    <i class="mmv-icon iconfont icon-sousuo"></i>
                </form>
                <div class="header__notifycontainer">
                    <mmv-link class="header__notify" href="/">关注</mmv-link>
                </div>
                <div @click.stop="onClickNotify" class="header__notifycontainer">
                    <div class="header__notify">消息</div>
                    <div class="header__notifypoint" count-num="22"></div>
                    <div :class="{'header__notification--show':is_notificaiton_show}" v-show="is_notificaiton_show">
                        <mmvTab :tabs="notificationTabs" @change="onChangeTabs"></mmvTab>
                        <div class="header__notifylist">
                            <mmvHeaderNotification :list="notificationList"></mmvHeaderNotification>
                        </div>
                        <div class="header__notifyfooter">
                            <span>全部已读</span>
                            <a class="mmv-router-link" href target="_blank">查看全部消息></a>
                        </div>
                    </div>
                </div>
                <div @click.stop="onClickAccount" class="header__avatarcontainer">
                    <div class="header__avatarwrp">
                        <div class="header__avatar">
                            <img src="https://img-static.mihoyo.com/communityweb/upload/ab5ebe41f1b04d2aa7500fbfbeebcf10.png" />
                        </div>
                    </div>
                    <ul class="header__navitem--show header__navitem--account" v-show="is_account_show">
                        <li>
                            <mmv-link class="header__navmore" to="/accountCenter">个人中心</mmv-link>
                        </li>
                        <li>
                            <mmv-link class="header__navmore" target="_blank" to="/">米哈游通行证</mmv-link>
                        </li>
                        <li>
                            <mmv-link class="header__navmore" target="_blank" to="https://www.yuanshen.com/">原神官网</mmv-link>
                        </li>
                        <li>
                            <span class="header__navmore header__logout">退出登录</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import mmvTab from "@/components/mmv-tab.vue";
import mmvHeaderNotification from "@/components/mmv-header-notification.vue";

import reply from "@/fakeData/getUserGanmeNotifications-reply.json";
import follow from "@/fakeData/getUserGanmeNotifications-follow.json";

export default {
    components: {
        mmvTab,
        mmvHeaderNotification,
    },
    data() {
        return {
            is_search_focused: false,
            is_notificaiton_show: false,
            is_account_show: false,
            navitems: [
                { id: 1, name: "酒馆" },
                { id: 2, name: "攻略" },
                { id: 3, name: "官方" },
                { id: 4, name: "同人图" },
            ],
            notificationTabs: [
                { count: 0, category: "reply", name: "回复" },
                { count: 2, category: "system", name: "系统通知" },
                { count: 3, category: "comment", name: "获得的赞" },
                { count: 4, category: "follow", name: "关注" },
            ],
            notificationList: [],
        };
    },
    methods: {
        onClickNotify() {
            this.closePanelHandler();
            window.addEventListener("click", this.closePanelHandler);
            this.is_notificaiton_show = true;
        },
        onClickAccount() {
            this.closePanelHandler();
            window.addEventListener("click", this.closePanelHandler);
            this.is_account_show = true;
        },
        closePanelHandler() {
            window.removeEventListener("click", this.closePanelHandler);
            this.is_account_show = false;
            this.is_notificaiton_show = false;
        },
        onChangeTabs(tab, index) {
            if (tab.category == "reply") {
                this.notificationList = reply.data.list;
            } else if (tab.category == "follow") {
                this.notificationList = follow.data.list;
            } else {
                this.notificationList = [];
            }
        },
    },
};
</script>

<style lang="less">
.header {
    line-height: 62px;
    background-color: #2d2f33;
    color: #fff;
    font-size: 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    user-select: none;
    &__inner {
        position: relative;
        width: 1200px;
        margin: 0 auto;
    }
    &__logo {
        height: 62px;
        display: inline-block;
        cursor: pointer;
        vertical-align: top;
        img {
            width: 90px;
            vertical-align: middle;
        }
    }
    &__title {
        display: inline-block;
        padding-left: 10px;
        margin-left: 10px;
        position: relative;
        font-size: 14px;
        vertical-align: top;
        font-weight: 600;
        width: 180px;
        &::before {
            content: "";
            position: absolute;
            left: 0;
            top: 24px;
            border-left: 1px solid rgba(255, 255, 255, 0.3);
            height: 15px;
        }
    }
    &__nav {
        &wrap {
            display: inline-block;
            vertical-align: top;
        }
        &bar {
            line-height: 20px;
            font-size: 0;
        }
        &item {
            display: inline-block;
            padding: 21px 0;
            width: 68px;
            height: 62px;
            text-align: center;
            vertical-align: top;
            color: #fff;
            cursor: pointer;
            position: relative;
            font-size: 14px;
            &--show {
                display: none;
                position: absolute;
                top: 62px;
                right: 0;
                width: 140px;
                z-index: 9;
                background-color: #fff;
                border-bottom-left-radius: 6px;
                border-bottom-right-radius: 6px;
                overflow: hidden;
                padding: 6px 0;
                box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
                text-align: left;
            }
            &--account {
                display: block;
                width: 160px;
            }
            .mmv-icon {
                font-size: 11px;
                display: inline-block;
                transform: rotate(-180deg);
                transition: all 300ms ease;
                vertical-align: top;
            }
            &:hover {
                background-color: rgba(255, 255, 255, 0.18);
                .mmv-icon {
                    transform: rotate(0);
                }
            }
            &:hover &--show {
                display: block;
            }
            &active {
                font-weight: bold;
                font-size: 16px;
                background-color: rgba(255, 255, 255, 0.18);
            }
            &more {
                width: 82px;
            }
        }
        &more {
            display: block;
            line-height: 44px;
            padding: 0 20px;
            color: #333;
            font-size: 14px;
            font-weight: normal;
            &.header__navitemactive {
                font-size: 14px;
                color: #4cc3ff;
                background-color: #fff;
            }
            &:hover {
                background-color: #4cc3ff;
                color: #fff;
            }
        }
    }
    &&__logout {
        color: #999;
        border-top: 1px solid #ebebeb;
        &:hover {
            background-color: #4cc3ff;
            color: #fff;
        }
    }
    &&__signin {
        display: flex;
        &::after {
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: #ff667f;
            margin-top: 8px;
        }
    }
    &__right {
        float: right;
        display: flex;
        font-size: 14px;
    }
    &__search {
        height: 30px;
        line-height: 30px;
        margin-top: 16px;
        padding: 0 35px 0 15px;
        position: relative;
        border-radius: 15px;
        margin-right: 15px;
        font-size: 14px;
        background-color: rgba(255, 255, 255, 0.22);
        input {
            color: #fff;
            width: 50px;
            height: 30px;
            border: none;
            outline: none;
            background-color: transparent;
            transition: width 300ms ease;
            &.focused {
                width: 80px;
            }
        }
        .mmv-icon {
            position: absolute;
            right: 12px;
            top: 0;
            cursor: pointer;
        }
    }
    &__notifypoint,
    &__notification--show .mmv-tab__label::after {
        height: 14px;
        line-height: 14px;
        border-radius: 8px;
        padding: 0 4px;
        background-color: #ff667f;
        position: absolute;
        left: 52px;
        top: 12px;
        border: 1px solid #fff;
        transform: translateX(-9px);
        box-sizing: content-box;
        font-size: 12px;
        color: #fff;
    }
    &__notifypoint,
    &__notification--show .mmv-tab__label {
        &::after {
            content: attr(count-num);
            vertical-align: top;
        }
    }
    &__notify {
        padding: 0 20px;
        cursor: pointer;
        display: inline-block;
        vertical-align: top;
        font-size: 14px;
        color: #fff;
        &container {
            position: relative;
            &:hover {
                background-color: rgba(255, 255, 255, 0.18);
            }
        }
        &list {
            padding: 0 24px;
            height: 344px;
            overflow-y: auto;
            overflow-x: hidden;
        }
        &footer {
            line-height: 50px;
            color: #4cc3ff;
            font-size: 14px;
            padding: 0 20px;
            border-top: 1px solid #ebebeb;
            span {
                cursor: pointer;
            }
            a {
                float: right;
            }
        }
    }
    &__notification {
        &--show {
            position: absolute;
            top: 62px;
            right: 0;
            width: 320px;
            z-index: 9;
            background-color: #fff;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            overflow: hidden;
            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15);
            animation: fade-in 0.3s both;
            .mmv-tab {
                border-bottom: 1px solid #ebebeb;
                padding: 0 20px;
                &__item {
                    font-size: 14px;
                    font-weight: normal;
                    padding: 0 2px;
                    & + .mmv-tab__item {
                        margin-left: 30px;
                    }
                }
            }
            .mmv-tab__label {
                position: relative;
                &::after {
                    content: none;
                    left: 100%;
                    top: 7px;
                }
            }
            .header__notifycount--show::after {
                content: attr(count-num);
            }
        }
    }
    &__avatar {
        height: 36px;
        width: 36px;
        padding: 2px;
        background-color: #fff;
        border-radius: 100%;
        &container {
            cursor: pointer;
            &:hover {
                background-color: rgba(255, 255, 255, 0.18);
                .header__navitem--show {
                    display: block;
                }
            }
        }
        &wrp {
            display: block;
            padding: 13px 20px;
        }
        &.header__sign-tip {
            position: relative;
            &::after {
                content: "";
                position: absolute;
                width: 8px;
                height: 8px;
                top: -4px;
                right: -4px;
                border-radius: 50%;
                background-color: #ff667f;
                border: 1px solid #fff;
            }
        }
        img {
            width: 100%;
            height: 100%;
            vertical-align: top;
            border-radius: 100%;
        }
    }
}
</style>